<template>
<div>
     <div class="pic">
     <van-nav-bar
         left-text="订单详情"
         left-arrow
         @click-left="onClickLeft"
    /> 
    </div>
    <div class="address">
      <p class="map"><van-icon name="location-o" /></p>
      <div>
        <h2>{{receiver}}<span>{{mobile}}</span></h2>
        <p>{{address}}</p>
        <p>收费不便时,可选择免费暂存服务</p>
     </div>
    </div>
    <div class="box">
      <div class="card-item">
        <div class="card-title">
          <div class="shopImg"><img src="../images/shop_logo_10.png" alt=""></div>
          <dl>
              <dt>永辉超市</dt>
              <dd class="tagIcon">
                  <van-tag style="margin-right:5px;" color="#f2826a" plain>拼团</van-tag>
                  <van-tag color="#f2826a" plain>满减</van-tag>
              </dd>
          </dl>
        </div>
        <div class="card-body">
          <div class="card-body-item" v-for="(v,i) in details":key="i">
              <span><img :src="v.product.coverImg" alt=""></span>
              <span>{{v.product.name}}</span>
              <span>{{v.quantity}}</span>
              <span>￥{{v.product.price}}</span>
          </div>
        </div>
        <p>
          <span>配送费</span>
          <span>￥3</span>
        </p>
        <p>
          <span>优惠券</span>
          <span>￥50</span>
        </p>
        <div class="card-footer">
          <span>总数量</span>
          <span>￥{{num}}</span>
        </div>
    </div>
  </div>
</div>
       
    
</template>

<script>
import * as api from '@/api/order' 
export default {
    name:'OrderDetail',
    data(){
      return{
        order:'',
        receiver:'',
        mobile:'',
        address:'',
        details:'',
        num:'',
      }
    },
    
    methods:{
    onClickLeft() {
      this.$router.go(-1)
    },
    },
    mounted(){
       api.getOrderDetail(this.$route.params.id).then((data)=>{
        console.log(data.data.details)
        this.receiver=data.data.order.receiver;
        this.mobile=this.$store.state.address.mobile;
        this.address=data.data.order.address;
        this.order=data.data.order
        this.details=data.data.details
        let sum=0;
        this.details.map(v=>{
         sum+=v.price*v.quantity
        })
        this.num=sum
    })
    
    }
}
</script>

<style scoped>
.pic{
    height: 200px;
    background: #eee
}    
.pic >>> .van-nav-bar{
    background: none
}
.address{
  display: flex;
  padding: 10px 0;
  box-sizing: border-box;
  border-bottom: 1px solid #ccc;
}
.address .map{
  width: 40px;
  height: 40px;
  background: linear-gradient(-45deg,rgb(248, 43, 7),rgb(250, 147, 99));
  text-align: center;
  box-sizing: border-box;
  border-radius: 50%;
  padding: 7px;
  margin: 10px 20px 0 15px;
}
.address .map .van-icon{
  font-size: 26px;
  color: #fff
}
.address div h2{
  font-size: 14px;
  color: #111;
  line-height: 26px; 
}.address div h2 span{
  margin-left: 10px;
  color: #333
}
.address div p{
  line-height: 20px;
  color: #333;
  font-size:12px;
}
.address .van-icon{
  font-size: 20px;
  color: #999; 
}
.address div p:nth-of-type(2){
  color: rgb(247, 54, 54);
  font-size: 12px
}
.address .right{
    float:right;
    margin: 15px 0 0 100px; 
}
.box{
    height:100%;
    width:100%;
    padding:20px 16px 0;
    background:#F9F9F9;
    box-sizing: border-box;
}
.card-item{
    min-height:100px;
    border-radius:10px;
    box-shadow:0 5px 10px rgb(179, 179, 179);
    overflow: hidden;
    box-sizing: border-box;
    padding: 0 14px;
    margin-bottom:20px;
}
.card-title{
    min-height:58px;
    border-bottom:1px solid #aaa;
    margin-top:10px;
    display: flex;
}
.card-title .shopImg{
    width:38px;
    height:38px;
    border-radius:4px;
    margin-right:10px;
    overflow: hidden;
}
.card-title .shopImg img{
    width:38px;
    height:38px;
    transform: scale(1.9);
}
.card-title dl dt{
    font-size:16px;
    line-height: 1;
    margin-bottom: 6px;
}
.card-title dl dt .van-icon{
    color:#999;
}
.card-body{
    padding-top:14px;
}
.card-body span{
    float:left;
    line-height: 56px;
    color:#333;
    font-size:12px;
}
.card-body-item{
    height:56px;
    margin-bottom:18px;
}
.card-body-item span:nth-of-type(n+3){
    float:right;
    display: block;
    color:#999;
    
}
.card-body-item span:nth-of-type(1) img{
  width: 100%;
}
.card-body-item span:nth-of-type(1){
    width:70px;
    height:56px;
    background:#aaa;
    margin-right:18px;
}
.card-body .card-body-item span:nth-of-type(3){
    margin-left:10px;
}
.card-footer{
    text-align:right;
    color:#333;
    margin-bottom:16px;
}
.card-footer span:nth-of-type(1){
    margin-right:10px;
    font-size:14px;
}
.card-footer span:nth-of-type(2){
    font-size:18px;
    color: rgb(250, 43, 43)
}
.card-body-item span:nth-of-type(4){
  color: rgb(250, 43, 43)
}
.van-button{
    float:right;
    border-radius:10px;
    color:#66B32E;
    border-color:#66B32E;
    margin-bottom:14px;
}
</style>


